<template>
  <div class="my-popup">
    <transition name="mask">
      <div class="mask" @click="close" v-show="value"></div>
    </transition>

    <transition name="slide">
      <div
        class="con"
        :style="styles"
        :class="'pos-' + position"
        v-show="value"
      >
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    value: Boolean,
    position: String,
    styles: Object,
  },
  data() {
    return {};
  },
  methods: {
    close() {
      //   this.value = false;
      this.$emit("input", false);
      //
    },
  },
  created() {},
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.my-popup {
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
  }
  .con {
    height: 100%;
    background: #fff;
    position: fixed;
  }
  .pos-left {
    left: 0;
    top: 0;
  }
  .pos-top {
    left: 0;
    top: 0;
  }
  .pos-bottom {
    bottom: 0;
    left: 0;
  }
  .slide-enter-active,
  .slide-leave-active {
    transition: all 3s;
  }
  .slide-enter,
  .slide-leave-to {
    left: -100%;
  }
  //内容的滑动动画

  .mask-enter-active,
  .mask-leave-active {
    transition: all 3s;
  }
  .mask-enter,
  .mask-leave-to {
    opacity: 0;
  }
  //蒙版的透明度的动画
}
</style>
